<template>
  <div>
    <section >
      <div class="grid_box">
        <div>
          <h3>用户注册</h3>
        </div>
        <div class="form_box">
          <span class="key_name">用户名</span>
          <span class="input">
            <input type="text" v-model="user" required />
          </span>
          <span class="userName" v-show="user_acc">
            用户名只能含有数字、字母、下划线"_"
          </span>
          <span class="key_name">密码</span>
          <span class="input">
            <input type="password" v-model="pwd" required />
          </span>
          <span class="form_tip">
            <img class="pwd_tip" src="@/assets/true_pic.png" alt="密码符合规范" v-show="access" />
            <img class="pwd_tip" src="@/assets/false_pic.svg" alt="密码不规范" v-show="!access" />
          </span>
          <span class="pass_tip" v-show="!access">
            密码长度8-20个字符，需同时含有数字、大写字母、小写字母，且不含空格
          </span>
          <span class="key_name">确认密码</span>
          <span class="input">
            <input type="password" v-model="pwd_r" required />
          </span>
          <span class="form_tip">
            <img class="pwd_tip" src="@/assets/true_pic.png" alt="密码一致" v-show="pwdr_acc" />
            <img class="pwd_tip" src="@/assets/false_pic.svg" alt="密码不一致" v-show="!pwdr_acc" />
          </span>
          <span class="key_name">验证码</span>
          <div class="input checkPic_code">
            <div>
              <input type="text" v-model="pic_check" required />
            </div>
            <img class="check_pic" :src="this.pic_src" alt="验证码加载失败" />
          </div>
          <span class="form_tip">
            <a href="#" @click="changePic">换一张</a>
          </span>
        </div>
        <div>
          <button @click="valueEnbale">注册</button>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import axios from "axios";
import CryptoJS from "crypto-js";
import { spawnKey,infoEncode } from "@/assets/infoEncode.js";
import "@/assets/css/form.css";

export default {
  name: "Register",
  props: ["client_id","pic_src"],
  data() {
    return {
      user: "",
      pwd: "",
      pwd_r:"",
      check_code: "",
      timestamp: "",
      passcode: "",
      pic_check: "",
    }
  },
  computed: {
    user_acc(){//匹配含有字母、数字、下划线以外的字符
      return /[^\w]/g.test(this.user);
    },
    pwdr_acc(){
      if (Boolean(this.pwd_r) ==false) {
        return false;
      }else{
        return this.pwd === this.pwd_r;
      }
    },
    access() {
      if (this.pwd.length > 7 && this.pwd.length < 21) {
        // 强度计算
        let value_check = /^[\x21-\x7E]+$/g.test(this.pwd);
        let hard_check = /[A-Z]/g.test(this.pwd) +
          /[0-9]/g.test(this.pwd) +
          /[a-z]/g.test(this.pwd);
        return value_check && hard_check >= 3;
      }
      else {
        return false;
      }
    },
    request_enable(){
      // 填写有效性检测
      return Boolean(this.user) && !this.user_acc && Boolean(this.access) && Boolean(this.pic_check) && Boolean(this.pwdr_acc);
    }
  },
  methods: {
    valueEnbale() {
      // 完整性检查
      if (this.request_enable) {
        this.encode();
      }
      else {
        window.alert("注册信息不规范");
      }
    },
    encode() {
      var code = (this.pic_check).toLowerCase();
      let key_list = spawnKey(code);
      let se_key = key_list[0];
      let rand_code = key_list[1];
      let spawn_time = key_list[2];
      this.check_code = rand_code;
      this.timestamp = spawn_time;
      this.passcode = infoEncode(se_key,this.pwd);
      this.send();
    },
    send() {
      const requireA = axios.create({
        baseURL: "",
      });
      var post_info = {
        clientid: this.client_id,
        password: this.passcode,
        account: this.user,
        timestamp: this.timestamp,
        checkcode: this.check_code
      };
      requireA({
        url: "/apiRegister",
        method: "POST",
        data: post_info,
      }).catch(function (error) {
        if (error.response) {
          console.log('注册请求失败',error.response.status);
        }else{
          console.log('通信连接失败');
        }
      }).then((res)=>{
        window.alert(res['data']);
      });
    },
    changePic(){
      this.$parent.getPic();
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.pwd_tip {
  width: 20px;
  height: 20px;
}
.pass_tip{
  grid-column-start: 1;
  grid-column-end: span 3;
  /* grid-row: 3; */
  margin: auto;
  width: 380px;
  color: red;
}

.userName{
  grid-column-start: 1;
  grid-column-end: span 3;
  margin: auto;
  width: 380px;
  color: red;
}
</style>
